<template>
	<div class="life-detail delivery-wrap">
		<header-nav></header-nav>
		<p class="del-logo tc"><img src="../../assets/images/life/kd-logo.png"></p>
		<div class="lifec-content">
			<div class="life-box clearfix pl5 pr5">
				<input class="life-input fl" type="text" name="number" placeholder="请输入快递单号" autocomplete="off" v-model="delnumber">
				<button class="life-btn fl" v-on:click="delbtn">搜索</button>
			</div>
			<div class="del-detail mt5" v-if="showdel">
				<h2 class="del-company pt3 pb3 pl5 pr5">
					<span class="dcom">{{ delcom }}</span>   
					<span class="dtel">客服电话：<i>{{ deltel }}</i></span>
				</h2>
				<div class="del-listitle clearfix pl5 pr5">
					<span class="del-lt del-ltime">时间</span>
					<span class="del-lt del-ldes">地点和跟踪进度</span>
				</div>
				<div class="del-dcontent">
					<ul>
						<li class="del-dcbox clearfix pl5 pr5" v-for="(o,index) in deldata" v-bind:item="o" v-bind:index="index">
							<div class="del-dtime tc">{{ o.time }}</div>
							<div class="del-dctn">{{ o.context }}</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import HeaderNav from '../../components/header.vue'
	import axios from 'axios'
	export default{
		components : {
			HeaderNav
		},
		data(){
			return{
				deldata:[],
				showdel:false,
				delnumber:'',
				delcom:'',
				deltel:''
			}
		},
		mounted: function() {
		    document.getElementsByTagName("body")[0].className="bgfff"; 
		},
		methods:{
			delbtn(){
				if( this.delnumber=='' || this.delnumber==null ){
					alert("请输入要查询的快递单号！")
					return
				}
				
				let url = '/api/64-19';
				let sign = 'bc41dbe15d504543b791fe0cc5a80e50';
				axios({
					method: 'post',
					url: url,
					params: {
						'showapi_appid':'54164',
				    	'showapi_sign':sign,
				    	'com':'auto',
				    	'nu':this.delnumber
					}
				}).then((res) => {
					console.log(res)
					if ( res.data.showapi_res_body.ret_code == '0' ){
						this.showdel = true
						this.delcom = res.data.showapi_res_body.expTextName
						this.deltel = res.data.showapi_res_body.mailNo
						this.deldata = res.data.showapi_res_body.data
					}
					else{
						this.showdel = false
						alert(res.data.showapi_res_body.msg)
					}
					
				}) 
			}
		},
		beforeDestroy () {
		    document.getElementsByTagName("body")[0].className="";
		}
	}
</script>

<style scoped>
	
	
	.del-company .dcom{font-size: .8rem; font-weight: bold; display: inline-block; margin-right:1rem;}
	.del-company .dtel{font-size: .7rem; display: inline-block;}
	.dtel i{color: #f95e28;}
	.del-listitle{border-top:0.0625rem solid #e6e6e6; border-bottom:0.0625rem solid #e6e6e6}
	.del-listitle .del-lt{display: block; float: left; padding: .6rem; font-size: .75rem;}
	.del-listitle .del-ltime{width:35%}
	.del-listitle .del-ldes{width:65%;}
	.del-dcbox{border-bottom:0.0625rem solid #e6e6e6; display: -webkit-box; -webkit-box-align: center; color: #828282;}
	.del-dcbox:first-child{color: #ff7800;}
	.del-dcbox .del-dtime{width:4rem; padding: 0.4rem 0; margin-right: 1rem; font-size: .78rem; font-weight: bold;}
	.del-dcbox .del-dctn{-webkit-box-flex: 1; font-size: .65rem; padding: 0.4rem 0; line-height: 1.2rem;}
</style>